<template>
  <div class="gather">
    <CustomNavBar :title="t('Quantitative trading')">
      <span class="title" @click="goRecord">{{t('Record')}}</span>
    </CustomNavBar>
    <div class="container">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :finishedText="t('No more data')"
        @load="getQuanList"
        :loading-text="t('loading......')"
      >
        <van-cell v-for="e in quanList" :key="e.id">
          <div class="trading_item">
            <div class="org" align="left">{{e.sponsor_org}}</div>
            <div class="trading_info">
              <div class="left">
                <div class="code">{{decimalpre(e.rest_amount)}}</div>
                <p>{{t('Position Building Scale')}}</p>
              </div>
              <div class="right">
                <div class="rate">{{e.revenue_ratio * 100}}%</div>
                <p>{{t('Increase')}}</p>
              </div>
            </div>
            <div class="date">
              <span>{{t('Lock-in Period')}}：{{date(e.locking_time, 'DD/MM/YYYY')}}</span>
              <span class="status" v-if="e.status === 'closing'">{{t('Ended')}}</span>
              <span v-else class="sub_btn"  @click="openPopup(e)">{{t('Subscription')}}</span>
            </div>
          </div>
        </van-cell>
      </van-list>
       <!-- <div class="empty">
          <img src="@/assets/images/No-records_03.df9abc64.png" alt="" />
        </div> -->
      <van-popup
        v-model:show="showPopup"
        position="bottom"
        closeable
        @close="close"
      >
        <h5 class="stock_name">{{t('Quantitative trading')}}</h5>
        <div class="info-list">
          <div class="info-item">
            <span>{{t('Fund amount')}}</span>
            <span>₹{{decimalpre(curTrade.fund_amount)}}</span>
          </div>
          <div class="info-item">
            <span>{{t('Rest amount')}}</span>
            <span>₹{{decimalpre(curTrade.rest_amount)}}</span>
          </div>
          <div class="info-item">
            <span>{{t('Daily profit')}}</span>
            <span>{{curTrade.revenue_ratio * 100}}%</span>
          </div>
          <div class="info-item">
            <span>{{t('Min amount')}}</span>
            <span>{{curTrade.min_amount}}</span>
          </div>
          <div class="info-item">
            <span>{{t('Purchase amount')}}</span>
              <van-field :placeholder="t('Please Enter amount')" v-model="amount" :readonly="true"  clickable @touchstart.stop="show = true"></van-field>
              <van-number-keyboard
                v-model="amount"
                placeholder="Please enter"
                :show="show"
                :maxlength="10"
                @blur="show = false"
              />
          </div>
          <!-- <div class="info-item">
            <span>Service fee</span>
            <span>₹2912.36</span>
          </div>
          <div class="info-item">
            <span>Trading Balance</span>
            <span>₹2912.36</span>
          </div> -->
        </div>
        <div class="btn_box"><van-button :loading="submitLoading" @click="subscripHandler">{{t('Build Position')}}</van-button></div>
      </van-popup>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import {useRouter} from "vue-router"
import { get, post } from '@/utils/request'
import { date, decimalpre } from '@/utils/util'
import { showToast, showSuccessToast } from 'vant'
import { t } from '@/languages'
const router = useRouter()
const showPopup = ref(false)
const stock = ref('')
const VerificationCode = ref('')
const curTrade = ref({})
const quanList = ref([])
const finished= ref(false)
const loading = ref(false)
const page = ref(1)
const amount = ref('')
const show = ref(false)
const submitLoading = ref(false)
function openPopup(e) {
  curTrade.value = e
  showPopup.value = true
}


async function getQuanList () {
  try {
    const res = await get('/api/app/quant/list/', {
      limit: 10,
      page: page.value
    })
    const list = res.data || []
    quanList.value = quanList.value.concat(list)
    if(quanList.value.length === res.count) {
      finished.value = true
    } else {
      page.value += 1
    }
  } catch (error) {
    finished.value = true
  } finally {
    loading.value = false
  }
}

async function  subscripHandler() {
  const lockTime = new Date(curTrade.value.locking_time).getTime()
  const curTime = Date.now()
  const amountNum = +amount.value
  if(curTime > lockTime) {
    showToast(t(`Now it's time to lock in`))
    return
  }
  if (amountNum< curTrade.value.min_amount) {
    showToast(t('Not less than the min amount'))
    return
  }
  if(amountNum > curTrade.value.rest_amount) {
    showToast(t(`Not more than the rest amount`))
    return
  }

  try {
     submitLoading.value = true
     await post('/api/app/quant/sub/', {
      qid: curTrade.value.id,
      amount: amountNum
     })
     showPopup.value = false
     close()
     showSuccessToast(t('Successfull'))
  } catch (error) {
    
  } finally {
    submitLoading.value = false
  }
}

function close() {
  curTrade.value = {}
  amount.value = ''
}

function goRecord(){
    router.push("/gatherRecord")
}
</script>
<style lang="scss">
.van-cell {
  padding: 0;
  margin-bottom: 10px;
}
.sub_btn {
  color: #0d111a;
  font-weight: 600;
  background-color: #62f792;
  border-radius: 0.1rem;
  font-size: 0.3rem;
}
.gather .title {
  color: #62d8bf;
}

.gather .container {
  padding: .53333rem .4rem;
}

.gather .container .no_data {
  text-align: center;
  margin-top: 0.26667rem;
}

.gather .cell .cell-item {
  // padding: 0 0.26667rem;
  // border: 0.02667rem solid #2b4e5a;
  // border-radius: 0.13333rem;
  // margin: 0.13333rem 0;
  // box-shadow: 0 .10667rem .37333rem 0 rgba(0, 0, 0, .15);
   
}


.gather .cell .cell-item .cell-item-content {
  display: flex;
  border-bottom: 0.02667rem dotted #2b4e5a;
  padding-bottom: 0.13333rem;
}

.gather .cell .cell-item .cell-item-content .cell-item-content-item {
  flex: 1;
  padding: 0.26667rem 0;
}

.gather
  .cell
  .cell-item
  .cell-item-content
  .cell-item-content-item
  .cell-item-content-name {
  text-align: center;
  color: #f20c0c;
  padding: 0.13333rem 0;
}

.gather
  .cell
  .cell-item
  .cell-item-content
  .cell-item-content-item
  .cell-item-content-value {
  text-align: center;
  color: #999;
  font-size: 0.37333rem;
}

.gather .cell .cell-item .cell-item-footer {
  display: flex;
  padding: 0.26667rem 0;
  align-items: center;
}

.gather .cell .cell-item .cell-item-footer .cell-item-footer-time {
  font-size: 0.37333rem;
  color: #999;
}

.gather .cell .cell-item .cell-item-footer .cell-item-footer-value {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.gather
  .cell
  .cell-item
  .cell-item-footer
  .cell-item-footer-value
  .cell-item-footer-value-btn {
  padding: 0.13333rem 0.26667rem;
  background: linear-gradient(270deg, #62f792, #63fddb);
  color: #0d111a;
  font-weight: 600;
  border-radius: 0.13333rem;
  font-size: 0.32rem;
}

.gather .empty {
  margin-top: 1.86667rem;
  display: flex;
  justify-content: center;
}

.gather .empty img {
  width: 75vw;
  height: 25vh;
}

.gather .van-popup {
  background-color: #fff;
}

.gather .van-action-sheet {
  color: #000;
}

.gather .sheet-content {
  padding: 0.26667rem 0.4rem;
  padding-bottom: 1.33333rem;
}

.gather .sheet-content .sheet-content-title {
  display: flex;
  justify-content: space-between;
  font-size: 0.53333rem;
  font-style: normal;
  font-weight: 700;
  margin: 0.53333rem 0;
}

.gather .sheet-content .sheet-content-cell-item {
  border-radius: 0.13333rem;
  border: 0.02667rem solid #507b97;
  background: #c6e9ff;
  display: flex;
  padding: 0.26667rem 0.26667rem;
  align-items: center;
  font-size: 0.37333rem;
  margin-bottom: 0.13333rem;
}

.gather .sheet-content .sheet-content-cell-item .sheet-content-cell-item-name {
  flex: 1;
}

.gather .sheet-content .sheet-content-cell-item .sheet-content-cell-item-value {
  flex: 1;
  text-align: right;
}

.gather .sheet-content .cell-buy-container {
  display: flex;
}

.gather .sheet-content .cell-buy-container .cell-buy-balance {
  width: 100%;
  border-radius: 0.13333rem;
  border: 0.02667rem solid #507b97;
  background: #c6e9ff;
  display: flex;
  padding: 0.26667rem 0.26667rem;
}

.gather .sheet-content .cell-buy-container .cell-buy-balance .van-cell {
  padding: 0;
  font-size: 0.42667rem;
  color: #6d6d6d;
  background-color: unset;
}

.gather .sheet-content .cell-buy-container .cell-buy-balance .van-field__label {
  margin-right: 0;
  display: flex;
  align-items: center;
  color: #6d6d6d;
}

.gather
  .sheet-content
  .cell-buy-container
  .cell-buy-balance
  .van-field__control {
  padding-left: 0.13333rem;
  border-radius: 0.21333rem;
  height: 0.8rem;
  color: #000;
  text-align: right;
}

.gather .sheet-content .btns {
  padding: 0.53333rem 0;
}

.gather .sheet-content .btns .btn-item {
  color: #fff;
  border-radius: 0.4rem;
  text-align: center;
  height: 1.33333rem;
  line-height: 1.33333rem;
  background-color: #325d79;
}
.trading_item {
  border: 1px solid #2b4e5a;
  padding: 0.2rem;
  .org{
    font-size: 0.4rem;
  }
  .trading_info {
    display: flex;
    padding: 0.3rem 0;
    border-bottom: 1px solid #2b4e5a;
    .left,.right {
      flex: 1;
      font-size: 0.3733rem;
      text-align: center;
      line-height: 0.5rem;
      p {
        color: #aaa;
      }
    }
    .code {
      color: #f20c0c;
    }
    .rate {
      color: #62f792;
    }
  }
  .date {
    margin-top: 0.1rem;
    display: flex;
    height: 1rem;
    align-items: center;
    justify-content: space-between;
    span:first-of-type {
      color: #aaa;
    }
    .status {
      padding: 0.1rem;
      background-color: #aaa;
      border-radius: 0.1rem;
    }
    .sub_btn {
      padding: 0.1rem;
      margin-right: 1rem;
    }
  }
}
.btn_box {
  padding: 0.5rem;
  .van-button {
    width: 100%;
    background-color: #507b97;
    color: #fff;
  }
}
.stock_name {
  padding: 0.5rem 0;
  font-size: 0.5rem;
  color: #000;
  padding-left: 0.2rem;
}
.info-list {
  // padding-top: 1rem;
  padding: 0 0.2rem;
  .info-item {
    min-height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    background-color: #c6e9ff;
    border: 1px solid #2b4e5a;
    padding: 0 0.2rem;
    border-radius: 0.1rem;
    margin-bottom: 0.1rem;
    span {
      white-space: nowrap;
      flex-shrink: 0;
      font-size: 0.3rem;
      line-height: 0.5rem;
    }
    .van-field {
      background-color: transparent;
      padding: 0.2rem;
      input {
        text-align: right;
        font-size: 0.3rem;
      }
    }
  }
}
</style>
